<template>
  <div class="cart-bottom-bar">
    <div class="bottom-check">
      <check-button class="check-button" :is-checked="isSelectAll" @click.native="checkClick" />
      <span>全选</span>
    </div>
    <div class="price">
      合计:
      <span>¥ {{totalPrice}}</span>
      元
    </div>
    <div class="calculate" @click="calculateClick">
      去结算({{checkedLength}})
    </div>
  </div>
</template>

<script>
import CheckButton from 'components/content/checkbutton/CheckButton'
import {mapGetters, mapMutations} from 'vuex';

export default {
  components: {
     CheckButton 
  },
  computed: {
    ...mapGetters(['cartList']),
    totalPrice() {
      return this.cartList
        .filter(e => e.checked)
        .reduce((prev, item) => prev + item.price * item.count, 0)
        .toFixed(2);
    },
    checkedLength() {
      return this.cartList.filter(e => e.checked).length;
    },
    isSelectAll() {
      if(this.cartList.length === 0) {
        return false;
      }
      return !this.cartList.find(e => !e.checked);
    }
  },
  methods: {
    ...mapMutations(['clearCartList']),
    checkClick() {
      if(this.isSelectAll) {
        this.cartList.forEach(e => e.checked = false);
      } else {
        this.cartList.forEach(e => e.checked = true);
      }
    },
    calculateClick() {
      if(this.checkedLength === 0) {
        this.$toast({
          type: "fail",
          message: `您还没有选中商品哦`,
          forbidClick: true,
          duration: 1500
        });
      } else {
        this.$dialog
          .confirm({
            title: "温馨提示",
            message: "您确定要提交订单吗?"
          })
          .then(() => {
            this.$toast({
              type: "success",
              message: `提交 ${this.checkedLength} 条数据成功`,
              forbidClick: true,
              duration: 1500
            });
            // 提交数据后清空购物车对应的数据
            setTimeout(() => {
              this.clearCartList();
            }, 1500);
          })
          .catch(err => {
            console.log(err);
          });
      }
    }
  }
}
</script>

<style scoped>
.cart-bottom-bar {
  display: flex;
  align-items: center;
  border-top: 1px solid #ccc;
  height: 49px;
  line-height: 49px;
  font-size: 15px;
  background-color: #fff;
}

.bottom-check {
  display: flex;
  align-items: center;
  width: 80px;
}

.bottom-check .check-button {
  margin: 0 10px;
}

.price {
  flex: 1;
}

.price span {
  color: #f00;
}

.calculate {
  width: 100px;
  text-align: center;
  color: #fff;
  background: linear-gradient(to right, #ff6034, #ee0a24);
}
</style>